﻿<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Mini_Utils="clr-namespace:Mini.Utils" xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:local="clr-namespace:WindowsPhone7UXGuide" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="WindowsPhone7UXGuide.MainPage"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
	shell:SystemTray.IsVisible="True" ScrollViewer.VerticalScrollBarVisibility="Auto">

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel contains the name of the application and page title-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="WINDOWS PHONE 7" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="design templates" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - place additional content here-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" ScrollViewer.VerticalScrollBarVisibility="Auto">
			<ListBox>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="buttons" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Background="{StaticResource PhoneContrastBackgroundBrush}" Width="99" Height="99" Margin="0,0,12,12">
								<Image Source="images/button_pushbutton.png" Stretch="Fill" Width="99" Height="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/buttons.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Background="{StaticResource PhoneContrastBackgroundBrush}" Width="99" Height="99" Margin="0,0,12,12">
								<Image Height="99" Source="images/button_toggle.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/buttons.xaml" PivotIndex="1"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Background="{StaticResource PhoneContrastBackgroundBrush}" Width="99" Height="99" Margin="0,0,12,12">
								<Image Height="99" Source="images/button_action.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/buttons.xaml" PivotIndex="2"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="check boxes" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}" Margin="0,0,12,12">
								<Image Height="99" Source="images/checkbox_1column.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/check_boxes.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}" Margin="0,0,12,12">
								<Image Height="99" Source="images/checkbox_2columns.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/check_boxes.xaml" PivotIndex="1"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}" Margin="0,0,12,12">
								<Image Source="Images/checkbox_bottomalign.png" Stretch="Fill">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/check_boxes.xaml" PivotIndex="2"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="list view" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_1linewrap.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_2linewrap.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="1"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_3line.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="2"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_smalltext.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="3"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_smallicon.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="4"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_largeicons.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="5"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_largegrid.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="6"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_textwithsmallgrid.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="7"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/listview_smallgrid.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/list_view.xaml" PivotIndex="8"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="toggle switch" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/toggleswitch.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/toggle_switch.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="dialog boxes" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image HorizontalAlignment="Left" Height="99" Source="Images/dialogbox_textinput.png" Stretch="Fill" VerticalAlignment="Top" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/dialog_boxes.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image HorizontalAlignment="Left" Height="99" Source="Images/dialogbox_custom.png" Stretch="Fill" VerticalAlignment="Top" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/dialog_boxes.xaml" PivotIndex="1"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image HorizontalAlignment="Left" Height="99" Source="Images/dialogbox_messagebox.png" Stretch="Fill" VerticalAlignment="Top" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/dialog_boxes.xaml" PivotIndex="2"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image HorizontalAlignment="Left" Height="99" Source="Images/dialogbox_messageboxwithcheckbox.png" Stretch="Fill" VerticalAlignment="Top" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/dialog_boxes.xaml" PivotIndex="3"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="context menu" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Background="{StaticResource PhoneContrastBackgroundBrush}" Width="99" Height="99"  Margin="0,0,12,12">
								<Image Source="Images/context_menu.png" Stretch="Fill">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonDown">
											<ic:NavigateToPageAction TargetPage="/Pages/context_menu.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
				<ListBoxItem FontFamily="{StaticResource PhoneFontFamilyLight}" FontSize="{StaticResource PhoneFontSizeLarge}" Margin="12,9,0,18">
					<StackPanel Orientation="Vertical">
						<TextBlock Text="slider" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" LineHeight="43" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" Margin="0,0,0,31"/>
						<toolkit:WrapPanel HorizontalAlignment="Left" Margin="-1,0,0,0">
							<Grid Width="99" Height="99" Background="{StaticResource PhoneContrastBackgroundBrush}"  Margin="0,0,12,12">
								<Image Height="99" Source="images/slider.png" Stretch="Fill" Width="99">
									<Custom:Interaction.Triggers>
										<Custom:EventTrigger EventName="MouseLeftButtonUp">
											<local:NavigateToPivotAction TargetPage="/Pages/slider.xaml"/>
										</Custom:EventTrigger>
									</Custom:Interaction.Triggers>
								</Image>
							</Grid>
						</toolkit:WrapPanel>
					</StackPanel>
				</ListBoxItem>
			</ListBox>
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>